$game-color-1 : #282c35;
$game-color-2 : #21252b;
$game-color-3 : #191b1f;

$breakpoints : (
	'phone' : (320px,480px),
	'pad' : (481px,768px),
	'notebook' : (769px,1024px),
	'desktop' : (1025px,1200px),
	'pc' : 1201px
);

@mixin respond-to($breakname){
	$bp : map-get($breakpoints,$breakname);
	@if type-of($bp) == 'list'{
		$min : nth($bp,1);
		$max : nth($bp,2);
		@media (min-width:$min) and (max-width:$max){
			@content
		}
	}
	@else{
		@media (min-width:$bp){
			@content
		}
	}
};

@mixin qlty-color(){
	&.qlty-2{
		color:#0099cc;
	}
	&.qlty-3{
		color:#f0ad4e;
	}
	&.qlty-4{
		color:#dd524d;
	}
}

@mixin qlty-bg-color(){
	&.qlty-2{
		box-shadow: 0 0 15px 4px rgba(0, 153, 204, .7) inset;
	}
	&.qlty-3{
		box-shadow: 0 0 15px 4px rgba(240, 173, 78, .7) inset;
	}
	&.qlty-4{
		box-shadow: 0 0 15px 4px rgba(221, 82, 77, .75) inset;
	}
};

@mixin damageText(){
	.damageData{
		position: absolute;
		z-index: 999;
		left:0;
		top:0;
		right:0;
		bottom:0;
		display: flex;
		justify-content: center;
		align-items: center;
		.text{
			position: absolute;
			font-size: 24px;
			font-family: 'demonized';
			background-clip: text;
			-webkit-background-clip: text;
			color: transparent;
			-webkit-text-stroke: 1px #fff;
			&.normal{
				animation: damageText_normal 1s;
				animation-fill-mode: forwards;
				color:var(--color-red);
				&:before{
					content : '-';
				}
			}
			&.crit{
				animation: damageText_crit 1s;
				animation-fill-mode: forwards;
				color:var(--color-red);
				font-size:30px;
				margin-top:-10px;
				white-space: nowrap;
				&:before{
					content : '-';
					font-style: italic;
					margin-right:10px;
					font-size:26px;
					font-weight: bold;
				}
			}
		}
	}
}


@mixin character($character){
	
	@keyframes player_attack {
		0% {
			transform:translate3d(0,0,0);
		}
			
		50% {
			transform:translate3d(0,-10px,0);
		}
			
		100% {
			transform:translate3d(0,0,0);
		}
	}
	
	@keyframes monster_attack {
		0% {
			transform:translate3d(0,0,0);
		}
			
		50% {
			transform:translate3d(0,10px,0);
		}
			
		100% {
			transform:translate3d(0,0,0);
		}
	}
	
	@keyframes damageText_normal {
		0%{
			transform: scale3d(2.2,2.2,2.2);
		}
		10%{
			transform: scale3d(1,1,1);
			opacity: 1;
		}
		60%{
			opacity: 1;
		}
		100%{
			transform: translate3d(0,-50px,0);
			opacity: 0;
		}
	}
	
	
	@keyframes damageText_crit {
		0%{
			transform: scale3d(3,3,3);
		}
		10%{
			transform: scale3d(1,1,1);
			opacity: 1;
		}
		30%{
			opacity: 1;
		}
		100%{
			transform: translate3d(20px,-20px,0);
			opacity: 0;
		}
	}
	
	
	@keyframes ani_fadeOut {
		0% {
			opacity: 1;
		}
	
		100% {
			opacity: 0;
		}
	}
	
	@keyframes ani_scale {
		0% {
			transform: scale3d(1,1,1);
		}
		
		50% {
			transform: scale3d(.9,.9,.9);
		}
	
		100% {
			transform: scale3d(1,1,1);
		}
	}
	
	
	border: 1px solid #000;
	border-radius: 4px;
	height:80px;
	display: flex;
	background-color: $game-color-2;
	flex-direction: column;
	
	
	&.attack{
		animation: #{$character}_attack .2s;
	}
	&.dead{
		animation: ani_fadeOut 1s;
		animation-fill-mode: forwards;
	}
	&.underAttack{
		animation: ani_scale .2s;
	}
	
	.name{
		flex:1;
		display: flex;
		justify-content: center;
		align-items: center;
		font-size:14px;
	}
	
	.progress{
		border-bottom-left-radius:4px;
		border-bottom-right-radius:4px;
		overflow: hidden;
		.hp{
			border-top: 1px solid #000;
			position: relative;
			display: flex;
			justify-content: center;
			align-items: center;
			.info-text{
				font-size:12px;
				color:#fff;
				transform-origin: bottom center;
				position: absolute;
				bottom:1px;
				transform:scale(0.8);
				
			}
		}
		.rate{
			border-top: 1px solid #000;
		}
	}
	
	

}

